<template>
  <div class="wrap">
    <div class="wrapContent">
    <el-page-header @back="goBack" content>
    </el-page-header>
    <div v-html="data02.test" class="content"></div>
    <div class="userOperation">
      <p>版权声明： 自由转载-署名-非商业性使用 | 邹智敏 |</p>
      <el-row>
      <el-col :span="6">
        
      </el-col>
      <el-col :span="2">
        
      </el-col>
      <i class="fa fa-eye"></i>
        当前以被围观:{{data02.readNum}}
      <span>
          <i class="fa fa-thumbs-o-up" @click="agree"></i>
          :{{data02.agreeNum}}
        </span>
    </el-row>
      <el-divider></el-divider>
      <div class="loginOrRegist">
        <el-button @click="regist"><i class="fa fa-sign-in"></i>注册</el-button>
        <el-button @click="login" type="primary">登录</el-button>
      </div>
      <!-- 用户评论 -->
      <div class="comment">
        <el-row>
          <el-col :span="4">
            <img :src="userImg" />
          </el-col>
          <el-col :span="2">
            <span>{{localStorageUserName}}</span>
          </el-col>
          <el-col :span="18">
            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="textarea"></el-input>
          </el-col>
        </el-row>
        <div>
          <el-button @click="makeComment">
            <i class="fa fa-send (alias)"></i>
            评论
          </el-button>
        </div>
      </div>
      <!-- </el-form> -->
      <el-divider></el-divider>
      <!-- 显示评论 -->
      <div class="showComments" v-for="(item,index) in getComments" :key="index">
        <!-- 用户评论 -->
        <div class="userComments">
          <el-row>
            <el-col :span="2">
              <img :src="item.userImg" alt width="50px" height="50px" />
            </el-col>
            <el-col :span="1">
              <span>{{item.userName}}</span>
            </el-col>
            <el-col :span="5">{{item.createAt.substring(0,10)}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">{{item.content}}</el-col>
          </el-row>
          <div>
            <el-button type="primary" @click="reply(item)">
                 <i class="fa fa-reply"></i>         
              回复</el-button>
          </div>
          <!-- 回复消息显示 -->
          <div
            v-if="item.reply"
            class="replyComment"
            v-for="(items,index) in item.reply"
            :key="index"
          >
            <el-row>
              <el-col :span="4">{{items.replyUserName}} 回复了 {{item.userName}}</el-col>
              <el-col :span="19">{{items.content02}}</el-col>
            </el-row>
          </div>
        </div>

        <!-- 下面是回复组件 -->
        <div class="reply">
          <el-dialog title :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div class="comment">
              <div class="userInfo">
                <img :src="userImg" alt width="50px" height="50px" />
                <span>{{localStorageUserName}}</span>
              </div>
              <div class="commentMessage">
                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
              </div>
            </div>

            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="replyToDatabase(item)">回 复</el-button>
            </span>
          </el-dialog>
        </div>
      </div>

      <el-backtop>
        <i class="fa fa-angle-double-up"></i>
      </el-backtop>
    </div>
  </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      data02: "",
      img: "",
      labelPosition: "right",
      formLabelAlign: {
        userName: "",
        userEmail: ""
      },
      userImg: "",
      textarea: "",
      getComments: "", //获取评论
      localStorageUserName: "",
      agreeNum: Number, //
      readNum: Number,
      dialogVisible: false,
      replytoUser: "",

      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
      }
    };
  },
  created() {},
  beforeMount() {
    this.userImg = localStorage.userImg;
    this.localStorageUserName = localStorage.userName;
    axios({
      url: "http://localhost:3000/detail/gettest",
      method: "post",
      data: {
        title: localStorage.title
      }
    }).then(response => {
      this.data02 = response.data.message;
      this.readNum = response.data.message.readNum;
    });
    axios({
      url: "http://localhost:3000/detail/getcomments",
      method: "post",
      data: { title: localStorage.title }
    }).then(response => {
      if (response) {
        this.getComments = response.data.message;
      } else console.log("无评论");
    });
  },
  mounted() {
    //阅读操作
    setTimeout(() => {
      this.loadReadNum();
    }, 1000);
  },
  methods: {
    loadReadNum() {
      this.readNum = parseInt(this.readNum) + 1;
      axios({
        url: "http://localhost:3000/detail/addread",
        method: "post",
        data: {
          readNum: this.readNum,
          title: localStorage.title
        }
      }).then(response => {});
    },
    goBack() {
      this.$router.go("-1");
    },
    getImg() {
      let math = { id: Math.floor(Math.random() * 5) };
      axios({
        url: "http://localhost:3000/detail/getuserimg",
        method: "post",
        data: math
      }).then(response => {
        this.userImg = response.data.message.userImg;
        localStorage.userImg = this.userImg;
      });
    },
    regist() {
      this.$router.push("/detail/login");
    },
    //登录
    login() {
      this.$router.push("detail/login");
    },
    //评论按钮函数
    makeComment(item) {
      this.dialogVisible = false;
      axios({
        url: "http://localhost:3000/detail/comments",
        method: "post",
        data: {
          content: this.textarea,
          title: localStorage.title,
          userImg: localStorage.userImg,
          userName: localStorage.userName
        }
      }).then(response => {});
    },
    //点赞操作函数
    agree() {
      this.data02.agreeNum = this.data02.agreeNum + 1;
      axios({
        url: "http://localhost:3000/detail/addagree",
        method: "post",
        data: {
          agreeNum: this.data02.agreeNum,
          title: this.data02.title
        }
      }).then(response => {});
    },
    //回复组件关闭功能
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    reply(item) {
      this.dialogVisible = true;
      localStorage.replytoUser = item.userName;
    },
    replyToDatabase(item) {
      this.dialogVisible = false;
      axios({
        url: "http://localhost:3000/detail/replytodatabase",
        method: "post",
        data: {
          content: item.content,
          content02: this.textarea,
          replyUserName: localStorage.userName,
          title: localStorage.title
        }
      }).then(response => {});
    }
  }
};
</script>

<style>
.wrap {
  width: 80%;
  margin: 0 auto;
  background: whitesmoke;
  box-shadow: 0 0 20px;
  /* box-shadow: offset-x offset-y blur spread color inset;
     box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];
   */
}
.wrapContent{
  width: 100%;
  overflow: auto;
}
.content {
  width: 50rem;
  margin: 0 auto;
}
.loginOrRegist {
  width: 90%;
  margin-bottom: 1rem;
}
.loginOrRegist > .el-button {
  float: right;
}
.userOperationRegister {
  width: 80%;
  margin: 0 auto;
}
.comment {
  width: 90%;
}
.comment > div > .el-button {
  float: right;
}
.showComments {
  /* background: skyblue; */
  margin: 0 auto;
  width: 90%;
}
.userComments {
  width: 90%;
  /* background: seagreen; */
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
.userComments > div > .el-button {
  float: right;
}
.userInfo {
  float: left;
}
.replyComment {
  float: right;
  border: 1px solid black;
  margin-top: 0.5rem;
  /* background: salmon; */
}
.el-input {
  width: 55%;
}
.comment > .el-row > .el-col > img {
  width: 3rem;
  height: 3rem;
  float: right;
}
.giveAgree {
  position: fixed;
}
.userOperation {
  width: 60%;
  display: flex;
  flex-direction: column;
  left: 0;
  margin: 0 auto;
}
</style>